---
type: integration
title: '@astrojs/solid-js'
description: '@astrojs/solid-js 프레임워크 통합을 사용하여 Astro 프로젝트에서 컴포넌트 지원을 확장하는 방법을 알아보세요.'
sidebar:
  label: SolidJS
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/solid/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

이 **[Astro 통합][astro-integration]을** 통해 [SolidJS](https://www.solidjs.com/) 컴포넌트에 대한 렌더링 및 클라이언트 측 하이드레이션이 가능해졌습니다.

## 설치

Astro에는 공식 통합 설정을 자동화하는 `astro add` 명령이 포함되어 있습니다. 원하는 경우 대신 [통합을 수동으로 설치](#수동-설치)할 수 있습니다.

`@astrojs/solid-js`를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add solid
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add solid
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add solid
  ```
  </Fragment>
</PackageManagerTabs>

문제가 발생하면 [GitHub에서 언제든지 보고](https://github.com/withastro/astro/issues)하고 아래 수동 설치 단계를 시도해 보세요.

### 수동 설치

먼저 `@astrojs/solid-js` 패키지를 설치하세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/solid-js
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/solid-js
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/solid-js
  ```
  </Fragment>
</PackageManagerTabs>

대부분의 패키지 관리자는 관련 피어 종속성도 설치합니다. Astro를 시작할 때 `Cannot find package 'solid-js'` (또는 이와 유사한) 경고가 표시되면 SolidJS를 설치해야 합니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install solid-js
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add solid-js
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add solid-js
  ```
  </Fragment>
</PackageManagerTabs>

그런 다음 `integrations` 속성을 사용하여 `astro.config.*` 파일에 통합을 적용합니다.

```js title="astro.config.mjs" ins={2} ins="solidJs()"
import { defineConfig } from 'astro/config';
import solidJs from '@astrojs/solid-js';

export default defineConfig({
  // ...
  integrations: [solidJs()],
});
```

그리고 `tsconfig.json` 파일에 다음 코드를 추가하세요.

```json title="tsconfig.json" ins={5-8}
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}
```

## 시작하기

Astro에서 첫 번째 SolidJS 컴포넌트를 사용하려면 [UI 프레임워크 문서][astro-ui-frameworks]로 이동하세요. 다음을 탐색하게 됩니다.

* 📦 프레임워크 구성요소가 로드되는 방식,
* 💧 클라이언트 측 하이드레이션 옵션
* 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회

## 구성

### `devtools`

<p>

**타입:** `boolean`<br />
<Since pkg="@astrojs/solid-js" v="4.2.0" />
</p>

`devtools: true`가 포함된 객체를 `solid()` 통합 구성에 전달하고 프로젝트 종속성에 `solid-devtools`를 추가하여 개발 모드에서 [Solid DevTools](https://github.com/thetarnav/solid-devtools)를 활성화할 수 있습니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install solid-devtools
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add solid-devtools
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add solid-devtools
  ```
  </Fragment>
</PackageManagerTabs>

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // ...
  integrations: [solid({ devtools: true })],
});
```

## 옵션

### 여러 JSX 프레임워크 결합

동일한 프로젝트에서 여러 JSX 프레임워크 (React, Preact, Solid)를 사용하는 경우 Astro는 각 컴포넌트에 어떤 JSX 프레임워크별 변환을 사용해야 하는지 결정해야 합니다. 프로젝트에 하나의 JSX 프레임워크 통합만 추가한 경우 추가 구성이 필요하지 않습니다.

어떤 파일이 어떤 프레임워크에 속하는지 지정하려면 `include` (필수) 및 `exclude` (선택 사항) 구성 옵션을 사용하세요. 사용 중인 각 프레임워크에 `포함`할 파일 및/또는 폴더 배열을 제공하세요. 와일드카드를 사용하여 여러 파일 경로를 포함할 수 있습니다.

포함을 더 쉽게 지정할 수 있도록 공통 프레임워크 컴포넌트를 동일한 폴더 (예: `/components/react/` 및 `/components/solid/`)에 배치하는 것이 좋지만 필수는 아닙니다.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // 다양한 종류의 컴포넌트를 지원하기 위해 많은 프레임워크를 활성화합니다.
  // 단일 JSX 프레임워크만 사용하는 경우 `include`가 필요하지 않습니다!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*', '**/node_modules/@suid/material/**'],
    }),
  ],
});
```

## 사용하기

[UI 프레임워크 컴포넌트](/ko/guides/framework-components/)와 마찬가지로 SolidJS 컴포넌트를 사용하세요.

### Suspense Boundaries

과도한 구성 없이 Solid Resources 및 Lazy Components를 지원하기 위해 서버 전용 및 하이드레이션되는 컴포넌트는 자동으로 최상위 Suspense boundaries에 래핑되고 [`renderToStringAsync`][solid-render-to-string-async] 함수를 사용하여 서버에서 렌더링됩니다. 따라서 비동기 컴포넌트 주위에 최상위 Suspense boundary를 추가할 필요가 없습니다.

예를 들어, Solid의 [`createResource`][solid-create-resource]를 사용하여 서버에서 비동기 원격 데이터를 가져올 수 있습니다. 원격 데이터는 Astro의 초기 서버 렌더링 HTML에 포함됩니다.

```tsx
// CharacterName.tsx
function CharacterName() {
  const [name] = createResource(() =>
    fetch('https://swapi.dev/api/people/1')
      .then((result) => result.json())
      .then((data) => data.name)
  );

  return (
    <>
      <h2>Name:</h2>
      {/* Luke Skywalker */}
      <div>{name()}</div>
    </>
  );
}
```

마찬가지로 Solid의 [Lazy Components][solid-lazy-comments]도 해결되고 해당 HTML이 초기 서버 렌더링 페이지에 포함됩니다.

하이드레이션 되지 않는 [`client:only` 컴포넌트][astro-client-only]는 Suspense boundaries에 자동으로 래핑되지 않습니다.

원하는 대로 Suspense boundaries를 추가하세요.

[astro-integration]: /ko/guides/integrations-guide/

[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용

[astro-client-only]: /ko/reference/directives-reference/#clientonly

[solid-render-to-string-async]: https://www.solidjs.com/docs/latest/api#rendertostringasync

[solid-create-resource]: https://www.solidjs.com/docs/latest/api#createresource

[solid-lazy-components]: https://www.solidjs.com/docs/latest/api#lazy
